<template>
  <div class="website-share-box">
    <!-- 网站类型导航 -->
    <div class="website-type-box" v-if="defaultTopCategoryId">
      <website-type
          :website-type-list="websiteTypeList"
          :default-top-category-id="defaultTopCategoryId"
          @get-website-category-list-by-type="getWebsiteCategoryListByType"
          @get-website-list-by-type="getWebsiteListByType"
      ></website-type>
    </div>
    <!-- 网站内容区 -->
    <div class="website-content-box">
      <div class="input-box right">
        <input type="text" placeholder="" v-model="currentQuery" @keyup.enter="handleQuerySelect" class="input"/>
        <span class="span" @click="handleQuerySelect">搜</span>
      </div>
      <div
          v-for="(item, index) in categoryList"
          :key="index"
          :ref="(el) => setCategoryRef(el, item.categoryId)"
          class="category-content-box"
      >
        <!-- 分类标题 -->
        <category-title :title="item.categoryName"></category-title>
        <template
            v-if="
            websiteListObj[item.categoryId] &&
            websiteListObj[item.categoryId].length >0 &&
            !showSkeleton
          "
        >
          <!--网站卡片 -->
          <div class="websote-card-wrap">
            <div
                v-for="(cardData, j) in websiteListObj[item.categoryId]"
                :key="j"
                class="card-item"
            >
              <website-card :card-data="cardData"></website-card>
            </div>
          </div>
        </template>
        <!-- 暂无数据 -->
        <div v-if="!websiteListObj[item.categoryId]" class="no-data-box">
          <no-data-vue></no-data-vue>
        </div>
        <!-- 骨架屏 -->
        <el-skeleton v-if="showSkeleton" :rows="5" animated/>
      </div>
    </div>

    <!-- 网站分类导航 -->
    <div class="website-category-box">
      <website-category-list
          :website-category-list="categoryList"
          @change-category="handleChangeCategory"
      ></website-category-list>
    </div>

    <!-- 回到顶部 -->
    <el-backtop :right="50" :bottom="80"/>
  </div>
</template>
<script lang="ts" setup>
import {
  getWebsiteCategoryListAsync,
  getWebsiteListByTypeAsync,
  getWebsiteTypeListAsync
} from '@/http/api/websiteShare';
import WebsiteType from './components/WebsiteType.vue';
import CategoryTitle from './components/CategoryTitle.vue';
import WebsiteCard from './components/WebsiteCard.vue';
import WebsiteCategoryList from './components/WebsiteCategoryList.vue';
import NoDataVue from "@/components/NoData/NoData.vue";

// 获取网站类型列表
const websiteTypeList = ref<any>([]);
const defaultTopCategoryId = ref<string>('');
const queryWebsiteTypeAll = async () => {
  const data = await getWebsiteTypeListAsync();
  if (data.code === 200) {
    data.data.map((item: { display: boolean, name: any; id: any, categoryIcon: any }) => {
      if (item.display) {
        websiteTypeList.value.push({
          categoryName: item.name,
          categoryId: item.id,
          categoryIcon: item.categoryIcon,
        });
      }
    });
    defaultTopCategoryId.value = websiteTypeList.value[0].categoryId
  } else {
    ElMessage.error(data.msg);
  }
};
queryWebsiteTypeAll();

// 根据类型查询网站分类
const categoryList = ref<any>([]);

const getWebsiteCategoryListByType = async (parentId: string) => {
  categoryRefs = [];
  categoryList.value = [];
  const params = {
    parentId: parentId
  };

  const data = await getWebsiteCategoryListAsync(params);
  if (data.code === 200) {
    categoryList.value = data.data.map((item: { name: any; id: any, categoryIcon: any }) => {
      return {
        categoryName: item.name,
        categoryId: item.id,
        categoryIcon: item.categoryIcon,
      };
    });
  } else {
    ElMessage.error(data.msg);
  }
};

// 根据类型查询出该类型下的所有网站
const websiteListObj = ref<any>({});
const showSkeleton = ref<boolean>(true); // 是否显示骨架屏
const currentParentId = ref<string>('');
const currentQuery = ref<string>('');

const getWebsiteListByType = async (item: any) => {
  websiteListObj.value = {};
  showSkeleton.value = true;
  const params = {
    topCategoryId: item.topCategoryId,
    queryText: item.currentQuery
  };
  currentParentId.value = item.topCategoryId;
  currentQuery.value = item.currentQuery

  const data = await getWebsiteListByTypeAsync(params);
  if (data.code === 200) {
    websiteListObj.value = data.data;
    showSkeleton.value = false;
  } else {
    showSkeleton.value = false;
    ElMessage.error(data.msg);
  }
};
const handleQuerySelect = () => {
  let queryParams = {
    topCategoryId: currentParentId.value,
    currentQuery: currentQuery.value
  };
  getWebsiteListByType(queryParams)
};
// 点击分类
const handleChangeCategory = (id: string) => {
  const index = categoryRefs.findIndex((item) => item.id === id);
  if (index >= 0) {
    categoryRefs[index].el.scrollIntoView({behavior: 'smooth'});
  }
};

let categoryRefs: Array<any> = []; // 分类列表ref
const setCategoryRef = (el: any, id: string) => {
  if (el) {
    const index = categoryRefs.findIndex((item) => item.id === id);
    if (index < 0) {
      categoryRefs.push({
        id: id,
        el: el
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.website-share-box {
  width: 1390px;
  padding: 30px 0;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;

  .website-type-box {
    width: 150px;
    min-height: 300px;
    position: sticky;
    top: 95px;
  }

  .website-content-box {
    width: 1050px;
    min-height: 300px;
    background-color: rgb(251 251 251 / 80%);
    margin: 0 auto;
    border-radius: 4px;
    padding: 5px 20px;

    .websote-card-wrap {
      display: flex;
      flex-wrap: wrap;
      padding: 20px 8px;

      .card-item {
        &:not(:nth-child(4n)) {
          margin-right: 15px;
        }
      }
    }
  }

  .website-category-box {
    width: 150px;
    position: sticky;
    top: 95px;
  }
}

.input-box {
  position: relative;
  display: inline-block;
  top: 4px;
  bottom: 4px;
}

.input {
  padding: 0 40px 0 20px;
  width: 160px;
  height: 38px;
  font-size: 14px;
  border: 1px solid #018060;
  border-radius: 40px;
  background: #ffffff;
  transition: width .5s;
  transition-delay: .1s;
}

.span {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  padding: 0;
  color: #018060;
  text-align: center;
  background: #222;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
}

.input:focus {
  width: 230px;
  outline: none;
  box-shadow: none;
}

.input:focus + .span {
  background-color: pink;
  color: #fff;
}
</style>
